<template>
  <el-dialog
    :visible.sync="mergeDialog"
    :before-close="mergeDialogClose"
    :append-to-body="false"
    :modal-append-to-body="false"
    class="merge-post-dialog"
    width="450px">
    <div>
      <Title title="资源同步更新选择" font-size="16px" style="margin-bottom:16px"/>
      <div class="tip" style="margin-bottom: 20px;">
        执行合并将同步更新合并后的资源到以下关联项，且合并资源
        与同步后无法恢复，请谨慎操作!
      </div>
      <div style="margin-bottom: 10px;"><el-checkbox v-model="mergeParams.relationDate" disabled>预约</el-checkbox></div>
      <div style="margin-bottom: 10px;"><el-checkbox v-model="mergeParams.relationMediumOrder" disabled>询单</el-checkbox></div>
      <div style="margin-bottom: 10px;"><el-checkbox v-model="mergeParams.relationOrder">订单（注：已封账订单不会进行更新）</el-checkbox></div>
      <div v-if="mergeParams.relationOrder" class="time-select">
        <span class="label">订单创建时间</span>
        <el-date-picker
          v-model="mergeParams.timeRange"
          type="daterange"
          size="small"
          value-format="timestamp"
          format="yyyy/MM/dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </div>
      <div class="center">
        <el-button class="search-btn-style" type="primary" size="small" @click="mergeStart">确认合并</el-button>
        <el-button class="cancel-btn-style" type="info" size="small" @click="mergeDialogClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';

export default {
  components: {
    Title
  },
  data() {
    return {
      mergeDialog: false,
      mergeParams: {
        relationDate: true,
        relationMediumOrder: true,
        relationOrder: false,
        timeRange: ''
      }
    };
  },
  methods: {
    openMergeDialog() {
      this.mergeDialog = true;
    },
    mergeStart() {
      const params = Object.assign({}, this.mergeParams);// 进行浅复制，不操作源数据
      if (params.relationOrder) {
        if (params.timeRange.length !== 2) {
          this.$message.warning('请选择订单创建时间');
          return;
        }
        params.start = params.timeRange[0];
        params.end = params.timeRange[1];
      }
      delete params.timeRange;
      this.mergeDialog = false;
      this.$emit('mergeStart', params);
    },
    mergeDialogClose() {
      this.mergeDialog = false;
      this.relationOrder = false;
    }
  }
};
</script>
<style lang="scss" scoped>
	.merge-post-dialog{
		.center{
			display: flex;
			justify-content: center;
		}
		&::v-deep {
		.el-dialog__header{
				padding: 0;
				bottom: 0;
		}
		.el-dialog__body{
				padding: 20px 24px;
		}
		}
		.time-select {
			margin-bottom: 10px;
			.label {
				font-size: 14px;
				margin-left: 23px;
				margin-right: 5px;
			}
			& ::v-deep {
				.el-range-editor--small {
					&.el-input__inner {
						height: 30px;
						width: 240px;
						&:hover {
							border-color: #406EFF;
						}
					}
					.el-range-input {
						font-size: 13px;
					}
					.el-range__close-icon {
						width: 14px;
					}
					.el-range-separator{
						line-height: 22px;
						padding: 0;
						width: 8%;
						box-sizing: content-box;
					}

				}
			}
		}
	}
</style>
